<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>

    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
        #mapCon .ol-zoom .ol-zoom-out {
            margin-top: 204px;
        }
        #mapCon .ol-zoomslider {
            background-color: transparent;
            top: 2.3em;
        }
        #mapCon .ol-touch .ol-zoom .ol-zoom-out {
            margin-top: 212px;
        }
        #mapCon .ol-touch .ol-zoomslider {
            top: 2.75em;
        }
        #mapCon .ol-zoom-in .ol.has-tooltip:hover[role=tooltip],
        #mapCon .ol-zoom-in .ol-has-tooltip:focus[role=tooltip] {
            top: 3px;
        }
        #mapCon .ol-zoom-out .ol-has-tooltip:hover[role=tooltip],
        #mapCon .ol-zoon-out .ol-has-out-tooltip:focus[role=tooltip] {
            top: 232px;
        }
        #mapCon .ol-zoom-extent {
            top: 280px;
        }

        /* 图层控件层样式设置 */
        .layerControl {
            position: absolute;
            bottom: 5px;
            min-width: 200px;
            max-height: 160px;
            right: 10px;
            top: 5px;
            /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
            z-index: 2001;
            color: #ffffff;
            background-color: #4c4e5a;
            /*边缘的宽度*/
            border-width: 10px;
            /*圆角的大小 */
            border-radius: 10px;
            /*边框颜色*/
            border-color: #000 #000 #000 #000;
        }

        .layerControl .title {
            font-weight: bold;
            font-size: 15px;
            margin: 10px;
        }
        .layerTree{
            padding-inline-start: 15px;
        }
        .layerTree li {
            list-style: none;
            margin: 5px 10px;
            font-size: 12px;
        }
        li .layer{
            position: absolute;
            margin-top: 0px;
        }
    </style>

    <script type="text/javascript">
       
       
        function init() {
          

            var tdk = "4c27d6e0e8a90715b23a989d42272fd8";   //天地图密钥
            //加载天地图瓦片图层数据
            var TiandiMap_vect = new ol.layer.Tile({
                    name: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + tdk,
                        wrapX: false
                    })
            });
            
            var TiandiMap_vectcia =new ol.layer.Tile({
                    name: "天地图矢量注记图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + tdk
                    })
            });

            var TiandiMap_img = new ol.layer.Tile({
                name: "天地图影像图层",
                visible:true, //图层不可见
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + tdk,
                    wrapX: false
                })
            });
            var TiandiMap_imgcia = new ol.layer.Tile({
                name: "天地图影像注记图层",
                visible:true,  //图层不可见
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + tdk,
                    wrapX: false
                })
            });

            //初始化地图容器
            var map = new ol.Map({
                target: 'mapCon',     //地图容器div的ID
                controls: ol.control.defaults({
                    attributionOptions: ({
                        collapsible: true
                    })
                }),
                view: new ol.View({
                    center: [12000000, 4000000],  //地图初始中心点
                    maxZoom: 28,     //最大瓦片显示级数
                    minZoom: 1,      //最小瓦片显示级数
                    zoom: 6          //地图初始显示级数
                }),
                layers:[TiandiMap_vect,TiandiMap_vectcia,TiandiMap_img,TiandiMap_imgcia]
            });
            var zoomslider = new ol.control.ZoomSlider(); 
            map.addControl(zoomslider);

            //加载图层列表数据
            loadLayersControl(map, "layerTree");
           
        }

        //map中的图层数组
        var layerArr = new Array();
        //图层名称数组
        var layerNameArr = new Array();
        //图层可见属性数组
        var layerVisibilityArr = new Array();

        /**
        * 加载图层列表数据
        * @param {ol.Map} map 地图对象
        * @param {string} id 图层列表容器ID
        */
        function loadLayersControl(map, id) {
            //图层目录容器
            var treeContent = document.getElementById(id); 
            //获取地图中所有图层
            var layers = map.getLayers();
            for (var i = 0; i < layers.getLength() ; i++) {
                //获取每个图层的名称、是否可见属性
                layerArr[i] = layers.item(i);
                layerNameArr[i] = layerArr[i].get('name');
                layerVisibilityArr[i] = layerArr[i].getVisible();
                //新增li元素，用来承载图层项
                var elementLi = document.createElement('li');
                // 添加子节点
                treeContent.appendChild(elementLi); 
                //创建复选框元素
                var elementInput = document.createElement('input');
                elementInput.type = "checkbox";
                elementInput.name = "layers";
                elementLi.appendChild(elementInput);
                //创建label元素
                var elementLable = document.createElement('label');
                elementLable.className = "layer";
                //设置图层名称
                setInnerText(elementLable, layerNameArr[i]);
                elementLi.appendChild(elementLable);
                //设置图层默认显示状态
                if (layerVisibilityArr[i]) {
                    elementInput.checked = true;
                }
                //为checkbox添加变更事件
                addChangeEvent(elementInput, layerArr[i]);  
            }
        }
        /**
        * 为checkbox元素绑定变更事件
        * @param {input} element checkbox元素
        * @param {ol.layer.Layer} layer 图层对象
        */
        function addChangeEvent(element, layer) {
            element.onclick = function () {
                if (element.checked) {
                    //显示图层
                    layer.setVisible(true);
                }
                else {
                    //不显示图层
                    layer.setVisible(false); 
                }
            };
        }
        /**
        * 动态设置元素文本内容（兼容）
        */
        function setInnerText(element, text) {
            if (typeof element.textContent == "string") {
                element.textContent = text;
            } else {
                element.innerText = text;
            }
        }



    </script>
</head>

<body onload="init()">
    <div id="mapCon">
        <div id="layerControl" class="layerControl">
            <div class="title"><label>图层列表</label></div>
            <ul id="layerTree" class="layerTree"></ul>
        </div>
    </div>
 </div>
 
</body>

</html>